<template>
  <img alt=" " :title="username" :src="imgSrc" class="flow-user-avatar">
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'FlowAvatar',
  props: {
    userId: createProps(String),
    username: createProps(String),
    request: createProps(Object, () => ({
      baseURL: '/',
      headers: {},
    }))
  },
  computed: {
    tenantId() {
      try {
        return this.request.headers.tenantId || this.request.headers['X-Tenant-Id']
      } catch(e) {
        console.error(e)
      }
      return undefined
    },
    imgSrc() {
      let baseURL = (this.request && this.request.baseURL ? this.request.baseURL : undefined) || "/";
      return baseURL + `/flow/user/avatar?id=${this.userId || 'default'}&tenantId=${this.tenantId}`;
    },
  }
};
</script>
<style>
.flow-user-avatar {
  height: 35px;
  width: 35px;
  border-radius: 50%;
}
</style>